<template>
  <div class="main_right" v-loading="pageLoading" element-loading-text="正在加载数据，请稍后......">
    <el-tabs v-model="currentTab" type="border-card"  @tab-click="clickTab" @tab-remove="removeTab" class="main_tab">
      <el-tab-pane v-for="(item, index) in listTab" :label="item.title" :name="item.name" :key="index" :closable="item.title === '首页' ? false : true" id="tab_content">
        <component :is="item.component"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import components from '../config/compoents.vue'
export default {
  mixins: [components],
  computed: {
    'pageLoading' () {
      return this.$store.state.updateState.pageLoading
    },
    'listTab' () {
      return this.$store.state.tab.listData
    },
    'currentTab': {
      get: function () {
        return this.$store.state.tab.currentTab
      },
      set: function (newValue) {
        this.$store.dispatch('currentTab', newValue)
      }
    }
  },
  methods: {
    // 根据tab的name值删除state.listData
    removeTab (tabItem) {
      console.log(tabItem)
      console.log(this.currentTab)
      console.log(this.listTab)
      if (tabItem === this.currentTab) { // 判断如果当前选中的tab与要删除的标签是同一个
        this.listTab.forEach((element, index) => {
          if (tabItem === element.name) {
            if (this.listTab.length === 2) {
              this.$store.dispatch('selMenu', '1')
              console.log('aaaaa')
              console.log(this.$store.state.tab.selMenu)
            } else {
              console.log('bbbbb')
              if (index === this.listTab.length - 1) { // 判断如果删除的是最后一个 那么就显示前一个 反之 删除后一个
                this.$store.dispatch('selMenu', this.listTab[index - 1].selMenu)
              } else {
                this.$store.dispatch('selMenu', this.listTab[index + 1].selMenu)
              }
            }
            this.$store.dispatch('delTab', tabItem)
            return
          }
        })
      } else {
        this.$store.dispatch('delTab', tabItem)
      }
    },
    clickTab (obj) { // 单击tab
      console.log(obj)
      var selArr = obj.$children[0].$vnode.tag.split('-')
      var selTab = selArr[selArr.length - 1].split('_')[0]
      console.log(selTab)
      console.log(this.$store.state.tab)
      // console.log(this.listTab)
      this.listTab.forEach(element => {
        // console.log(element)
        if (selTab === element.component) {
          // console.log(element.id)
          this.$store.dispatch('selMenu', element.selMenu)
          console.log(this.$store.state.tab)
          return
        }
      })
    },
    // tab页签内容高度计算
    tabContentHeight () {
      var winHeight = document.documentElement.clientHeight
      var divHeight = document.getElementsByClassName('el-tabs__content').item(0)
      divHeight.style.height = winHeight - 126 + 'px'
    }
  },
  mounted () {
    //      this.tabContentHeight()
    //       当窗口改变计算高度
    //      var me = this
    //      window.onresize = function() {
    //        me.tabContentHeight()
    //      }
    // var tabContent = document.getElementsByClassName('el-tabs__content')[0]
    // console.log(tabContent)
  }
}
</script>
<style>
.main_right {
  /*margin-left: 180px;*/
  width: auto;
  height: 100%;
}

.main_tab {
  height: 100%;
}











/* .el-tabs__header{
    position: absolute;
    top: 0;
  } */


.el-tabs__content{
    height: 100%;
    overflow: auto
  }
.el-tab-pane{
  padding-bottom: 100px
}
</style>
